<template>
	<view class="wrap" v-if="!loading">
		<view class="header">
			<view class="headr_top">
				<view class="left" v-if="tab_type == 1">
					<view class="store-name">
						<text>{{extract_store.store_name}}</text>
					</view>
				</view>
				<view class="right" v-if="tab_type == 1">
					<view class="dinein" :class="tab_type == 1?'active':''" @click="tabFunc(1)">
						<text>自取</text>
					</view>
					<view class="takeout" :class="tab_type == 0?'active':''" @click="tabFunc(0)">
						<text>外卖</text>
					</view>
				</view>
				<view class="flex-1" style="width: 100%;" v-if="tab_type != 1">
					<view class="left overflow-hidden">
						<view class="d-flex align-items-center overflow-hidden">
							<image src='/static/images/order/location.png' style="width: 30rpx; height: 30rpx;" class="mr-10"></image>
							<view class="font-size-extra-lg text-color-base font-weight-bold text-truncate" v-if="Address!=null" @click="gotoPage('/pages/user/address/address?is_order=1')">
								<view class="text-truncate">{{Address.region.province+Address.region.city+Address.region.region+Address.detail}}</view>
								<view class="gray9 f22">{{Address.name+" "+Address.phone}}</view>
							</view>
							<view v-else class="font-size-extra-lg text-color-base font-weight-bold text-truncate" @click="gotoPage('/pages/user/address/address?is_order=1')">
								<view>请选择配送地址</view>
							</view>
						</view>
					</view>
					<view class="right f-r">
						<view class="dinein" :class="tab_type == 1?'active':''" @click="tabFunc(1)">
							<text>自取</text>
						</view>
						<view class="takeout" :class="tab_type == 0?'active':''" @click="tabFunc(0)">
							<text>外卖</text>
						</view>
					</view>
				</view>

			</view>
			<view class="header_bottom" v-if="tab_type == 1">
				<view class="d-s-c">
					<image src='/static/images/order/location.png' style="width: 30rpx; height: 30rpx;" class="mr-10"></image>
					<text>{{extract_store.address}}</text>
				</view>
				<view class="d-b-c meal_item"  @click="timepick()" >
					<view class="f28">取餐时间</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left f28 ">
								<text class="blue">{{mealtime}}</text><text class="icon iconfont icon-jiantou"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="header_bottom" v-if="tab_type == 0">
				<view class="d-b-c meal_item"  @click="timepick()" >
					<view class="f28">预计送达时间：</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left f28 ">
								<text class="blue">{{wmtime}}</text><text class="icon iconfont icon-jiantou"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--购买的产品-->
		<view class="vender">
			<view class="list">
				<view class="item" v-for="(item, index) in ProductData" :key="index">
					<view class="info d-c-c">
						<view class="title">
							<view class="">{{ item.product_name }}</view>
						</view>
						<view class="num-wrap pl-30">
							<view class="f24 order_item fb">¥{{ item.product_price}}</view>
						</view>
					</view>
					<view class="info d-c-c">
						<view class="title">
							<view class="gray9 f22">{{ item.product_sku.product_attr }}</view>
						</view>
						<view class="num-wrap">
							<view class="f22 order_item ">×{{ item.total_num }}</view>
						</view>
					</view>
				</view>
			</view>
			<!--总数-->
			<view class="total-box">
				<view class="">
					合计：
					<text class="price f30">￥{{ OrderData.order_total_price }}</text>
				</view>
			</view>
			<view class="buy-checkout other_box">
				<view class="item" v-if="tab_type != 1">
					<text class="key">配送费用：</text>
					<text class="price gray6">￥{{ OrderData.express_price }}</text>
				</view>
				<view class="item" v-if="tab_type != 1">
					<text class="key">包装费用：</text>
					<text class="price gray6">￥{{ OrderData.packing_fee }}</text>
				</view>
			</view>

		</view>
		<view class="buy-checkout">
			<view class="d-s-c item">
				<view>备注</view>
				<input type="text" v-model="remark" placeholder="请输入备注" />
			</view>
		</view>
		<!--支付方式-->
		<view class="buy-checkout" v-if="OrderData.order_pay_price != 0">
			<!-- #ifdef MP-WEIXIN -->
			<view :class="pay_type == 20 ? 'item active' : 'item'" @click="payTypeFunc(20)">
				<view class="d-s-c">
					<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
					<text class="key">微信支付：</text>
				</view>
				<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
			</view>
			<!-- #endif -->
			<view :class="pay_type == 10 ? 'item active' : 'item'" @click="payTypeFunc(10)">
				<view class="d-s-c">
					<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
					<text class="key">余额支付：</text>
				</view>
				<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
			</view>
		</view>
		<!--底部支付-->
		<view class="foot-pay-btns">
			<view class="price" v-if="!OrderData.force_points">
				¥
				<text class="num">{{ OrderData.order_pay_price }}</text>
			</view>
			<button type="primary" @click="SubmitOrder">提交订单</button>
		</view>
		<timepicker :isTimer='isTimer' @close='closetimer'></timepicker>
	</view>
</template>

<script>
	import Myinfo from './confirm-order/my-info';
	import Storeinfo from './confirm-order/store-info';
	import timepicker from '@/components/timepicker/timepicker';
	import {
		pay
	} from '@/common/pay.js';
	export default {
		components: {
			Myinfo,
			Storeinfo,
			timepicker
		},
		data() {
			return {
				/*是否加载完成*/
				loading: true,
				options: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				tab_type: 0,
				/*商品id*/
				product_id: '',
				/*商品数量*/
				product_num: '',
				/*商品数据*/
				ProductData: [],
				/*订单数据数据*/
				OrderData: [],
				// 是否存在收货地址
				exist_address: false,
				/*默认地址*/
				Address: {
					region: []
				},
				extract_store: {},
				last_extract: {},
				product_sku_id: 0,
				/*配送方式*/
				delivery: 0,
				/*自提店id*/
				store_id: 1,
				linkman: '',
				phone: '',
				remark: '',
				/*支付方式*/
				pay_type: 20,
				deliverySetting: [],
				takeout_address: {},
				isTimer:false,
				mealtime:'',
				wmtime:''
			};
		},
		onLoad(options) {
			let self = this;
			self.options = options;
			self.delivery = options.delivery;
			this.getData();
		},
		onShow() {
			this.$fire.on('takeout', function(e) {
				console.log(e)
				self.takeout_address = e;
				self.orderType = 'takeout'
			})
		},
		methods: {
			/**/
			hasType(e) {
				if (this.deliverySetting.indexOf(e) != -1) {
					return true;
				} else {
					return false;
				}
			},
			/*支付方式选择*/
			payTypeFunc(e) {
				this.pay_type = e;
			},
			/*是否使用积分选择*/
			onShowPoints: function(e) {
				let self = this;
				if (e.target.value == true) {
					self.is_use_points = 1;
				} else {
					self.is_use_points = 0;
				}
				self.getData();
			},
			/*选择优惠卷*/
			onTogglePopupCoupon(e) {
				let self = this;
				self.isCoupon = true;
				self.couponList = e;
			},
			/*关闭优惠券*/
			closeCouponFunc(e) {
				let self = this;
				self.coupon_id = e;
				this.isCoupon = false;
				self.getData();
			},
			changeTime(n){
				
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});

				let callback = function(res) {
					self.OrderData = res.data.orderInfo;
					self.temlIds = res.data.template_arr;
					self.exist_address = self.OrderData.exist_address;
					self.Address = self.OrderData.address;
					self.extract_store = self.OrderData.extract_store;
					self.last_extract = self.OrderData.last_extract;
					self.ProductData = self.OrderData.product_list;
					self.linkman = res.data.orderInfo.last_extract.linkman;
					self.phone = res.data.orderInfo.last_extract.phone;
					let myDate = new Date();
					let myhours = myDate.getHours(); //获取当前小时数(0-23)
					if(myhours<10){
						myhours='0'+myhours
					}
					let myminute = myDate.getMinutes(); //获取当前分钟数(0-59)
					if(myminute<10){
						myminute="0"+myminute
					}
					let wmhours=myDate.getHours();
					let wmminute=myDate.getMinutes() + 15;
					console.log(wmminute)
					if(wmminute>=60){
						wmminute=wmminute-60;
						wmhours=wmhours+1;
					}
					if(wmminute<10){
						wmminute='0'+wmminute;
					}
					if(wmhours<10){
						wmhours='0'+wmhours;
					}
					self.wmtime=wmhours+':'+wmminute;
					self.mealtime=myhours+':'+myminute
					if (self.OrderData.delivery == '20') {
						self.tab_type = 1;
					}
					self.deliverySetting = self.OrderData.deliverySetting;
					if (self.OrderData.order_pay_price == 0) {
						self.pay_type = 10;
					}
					self.loading = false;
				};

				// 请求的参数
				let params = {
					delivery: self.delivery,
					store_id: 1,
					coupon_id: self.coupon_id,
					is_use_points: self.is_use_points,
					pay_source: self.getPlatform(),
					mealtime:''
				};

				//直接购买
				if (self.options.order_type === 'buy') {
					self._get(
						'order.order/buy',
						Object.assign({}, params, {
							product_id: self.options.product_id,
							product_num: self.options.product_num,
							product_sku_id: self.options.product_sku_id
						}),
						function(res) {
							callback(res);
						}
					);
				}
				// 购物车结算
				else if (self.options.order_type === 'cart') {
					self._get(
						'order.order/cart',
						Object.assign({}, params, {
							cart_ids: self.options.cart_ids || 0
						}),
						function(res) {
							callback(res);
						}
					);
				}
				// 积分兑换结算
				else if (self.options.order_type == 'points') {
					self._get(
						'plus.points.order/buy',
						Object.assign({}, params, {
							point_product_id: self.options.point_product_id,
							product_sku_id: self.options.product_sku_id,
							point_product_sku_id: self.options.point_product_sku_id,
							product_num: self.options.product_num
						}),
						function(res) {
							callback(res);
						}
					);
				}
			},

			/*选择配送方式*/
			tabFunc(e) {
				this.tab_type = e;
				if (e == 0) {
					this.delivery = 10;
				} else {
					this.delivery = 20;
				}
				this.getData();
			},
			
			/*提交订单*/
			SubmitOrder() {
				let self = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let _linkman = null;
				let _phone = null;
				if (self.$refs != null) {
					if (self.$refs.getShopinfoData != null) {
						_phone = self.$refs.getShopinfoData.phone;
						_linkman = self.$refs.getShopinfoData.linkman;
					}
				}

				let params = {
					delivery: self.delivery,
					store_id: 1,
					coupon_id: self.coupon_id,
					is_use_points: 0,
					linkman: self.linkman,
					phone: self.phone,
					remark: self.remark,
					pay_type: self.pay_type,
					pay_source: self.getPlatform(),
					mealtime: self.mealtime
				};
				if(self.delivery==10){
					params.mealtime=self.wmtime
				}
				// 创建订单-直接下单
				let url = '';
				if (self.options.order_type === 'buy') {
					url = 'order.order/buy';
					params = Object.assign(params, {
						product_id: self.options.product_id,
						product_num: self.options.product_num,
						product_sku_id: self.options.product_sku_id
					});
				}

				// 创建订单-购物车结算
				if (self.options.order_type === 'cart') {
					url = 'order.order/cart';
					params = Object.assign(params, {
						cart_ids: self.options.cart_ids || 0
					});
				}

				// 创建订单-积分兑换
				if (self.options.order_type === 'points') {
					url = 'plus.points.order/buy';
					params = Object.assign(params, {
						point_product_id: self.options.point_product_id,
						product_sku_id: self.options.product_sku_id,
						point_product_sku_id: self.options.point_product_sku_id,
						product_num: self.options.product_num
					});
				}
				// 创建订单-限时秒杀
				if (self.options.order_type === 'seckill') {
					url = 'plus.seckill.order/buy';
					params.num = self.options.num;
					params = Object.assign(params, {
						seckill_product_id: self.options.seckill_product_id,
						product_sku_id: self.options.product_sku_id,
						seckill_product_sku_id: self.options.seckill_product_sku_id,
						product_num: self.options.product_num
					});
				}
				// 创建订单-砍价
				if (self.options.order_type === 'bargain') {
					url = 'plus.bargain.order/buy';
					params = Object.assign(params, {
						bargain_product_id: self.options.bargain_product_id,
						product_sku_id: self.options.product_sku_id,
						bargain_product_sku_id: self.options.bargain_product_sku_id,
						bargain_task_id: self.options.bargain_task_id
					});
				}

				// 创建订单-限时拼团
				if (self.options.order_type === 'assemble') {
					url = 'plus.assemble.order/buy';
					params = Object.assign(params, {
						assemble_product_id: self.options.assemble_product_id,
						product_sku_id: self.options.product_sku_id,
						assemble_product_sku_id: self.options.assemble_product_sku_id,
						assemble_bill_id: self.options.assemble_bill_id,
						product_num: self.options.product_num,
					});
				}
				let callback = function() {
					self._post(url, params, function(result) {
						pay(result, self);
					});
				};

				self.subMessage(self.temlIds, callback);
			},
			timepick(){
				this.isTimer=true
			},
			closetimer(e){
				if(e!=''){
					this.wmtime=e;
					this.mealtime=e;
				}
				this.isTimer=false
			}
		}
	};
</script>

<style lang="scss">
	.headr_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 140rpx;
	}

	.header {
		width: 100%;

		padding: 20rpx;
		background-color: #ffffff;

		box-shadow: 0 0 0.06rem 0 rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		overflow: hidden;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;

			.store-name {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: $font-size-lg;
				margin-bottom: 10rpx;

				.iconfont {
					margin-left: 10rpx;
					line-height: 100%;
				}
			}

			.store-location {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: $text-color-assist;
				font-size: $font-size-sm;

				.iconfont {
					vertical-align: middle;
					display: table-cell;
					color: $color-primary;
					line-height: 100%;
				}
			}
		}

		.right {
			background-color: $bg-color-grey;
			border-radius: 38rpx;
			display: flex;
			align-items: center;
			font-size: $font-size-sm;
			padding: 0 38rpx;
			color: $text-color-assist;

			.dinein,
			.takeout {
				position: relative;
				display: flex;
				align-items: center;

				&.active {
					padding: 14rpx 38rpx;
					color: #ffffff;
					background-color: $color-primary;
					border-radius: 38rpx;
				}
			}

			.takeout {
				margin-left: 20rpx;
				height: 100%;
				flex: 1;
				padding: 14rpx 0;
			}

			.dinein.active {
				margin-left: -38rpx;
			}

			.takeout.active {
				margin-right: -38rpx;
			}
		}
	}

	.wrap {
		padding: 30rpx;
		padding-bottom: 90rpx;
	}

	.icon-box .icon-zhifubao {
		color: #1296db;
		font-size: 50rpx;
	}

	.order_item {
		width: 150rpx;
		text-align: right;
	}

	.other_box {
		border-radius: 0;
		box-shadow: 0;
		border-top: 1rpx solid #f5f5f5;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.header_bitem {}

	.f-r {
		float: right;
	}
	.meal_item{
		padding: 30rpx;
		border-bottom: 1rpx solid #f4f4f4;
		border-top: 1rpx solid #f4f4f4;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
	}
</style>
